<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE HTML>
<html lang="en">
<head>
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<![endif]-->
<meta charset="utf-8">
<title>jQuery File Upload Demo - Basic Plus version</title>
<meta name="description" content="File Upload widget with multiple file selection, drag&amp;drop support, progress bar, validation and preview images, audio and video for jQuery. Supports cross-domain, chunked and resumable file uploads. Works with any server-side platform (Google App Engine, PHP, Python, Ruby on Rails, Java, etc.) that supports standard HTML form file uploads.">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/statics/lib/jQuery-File-Upload/style.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/statics/lib/jQuery-File-Upload/jquery.fileupload.css">
</head>
<body>
<div class="container">
	<span class="btn btn-success fileinput-button"><i class="glyphicon glyphicon-plus"></i><span>Add files...</span><input id="fileupload" type="file" name="files[]" multiple></span><br>
	<br>
	<div id="progress" class="progress">
		<div class="progress-bar progress-bar-success">
		</div>
	</div>
	<div id="files" class="files">
	</div>
	<br>
</div>
<script src="${pageContext.request.contextPath}/statics/lib/jquery-3.2.1.min.js"></script>
<script src="${pageContext.request.contextPath}/statics/lib/jQuery-File-Upload/jquery.ui.widget.js"></script>
<script src="${pageContext.request.contextPath}/statics/lib/jQuery-File-Upload/load-image.all.min.js"></script>
<!-- <script src="//blueimp.github.io/JavaScript-Canvas-to-Blob/js/canvas-to-blob.min.js"></script> -->
<script src="${pageContext.request.contextPath}/statics/lib/bootstrap/js/bootstrap.js"></script>
<script src="${pageContext.request.contextPath}/statics/lib/jQuery-File-Upload/jquery.iframe-transport.js"></script>
<script src="${pageContext.request.contextPath}/statics/lib/jQuery-File-Upload/jquery.fileupload.js"></script>
<script src="${pageContext.request.contextPath}/statics/lib/jQuery-File-Upload/jquery.fileupload-process.js"></script>
<script src="${pageContext.request.contextPath}/statics/lib/jQuery-File-Upload/jquery.fileupload-image.js"></script>
<script src="${pageContext.request.contextPath}/statics/lib/jQuery-File-Upload/jquery.fileupload-audio.js"></script>
<script src="${pageContext.request.contextPath}/statics/lib/jQuery-File-Upload/jquery.fileupload-video.js"></script>
<script src="${pageContext.request.contextPath}/statics/lib/jQuery-File-Upload/jquery.fileupload-validate.js"></script>
<script>
$(function() {
	"use strict";
	//var e = "blueimp.github.io" === window.location.hostname ? "//jquery-file-upload.appspot.com/" : "server/php/",
	var e = "${pageContext.request.contextPath}/statics/images/data",
		a = $("<button/>").addClass("btn btn-primary").prop("disabled", !0).text("Processing...").on("click", function() {
			var e = $(this),
				a = e.data();
			e.off("click").text("Abort").on("click", function() {
				e.remove(), a.abort()
			}), a.submit().always(function() {
				e.remove()
			})
		});
	$("#fileupload").fileupload({
		url: e,
		dataType: "json",
		autoUpload: !1,
		acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
		maxFileSize: 999e3,
		disableImageResize: /Android(?!.*Chrome)|Opera/.test(window.navigator.userAgent),
		previewMaxWidth: 100,
		previewMaxHeight: 100,
		previewCrop: !0
	}).on("fileuploadadd", function(e, t) {
		t.context = $("<div/>").appendTo("#files"), $.each(t.files, function(e, n) {
			var r = $("<p/>").append($("<span/>").text(n.name));
			e || r.append("<br>").append(a.clone(!0).data(t)), r.appendTo(t.context)
		})
	}).on("fileuploadprocessalways", function(e, a) {
		var t = a.index,
			n = a.files[t],
			r = $(a.context.children()[t]);
		n.preview && r.prepend("<br>").prepend(n.preview), n.error && r.append("<br>").append($('<span class="text-danger"/>').text(n.error)), t + 1 === a.files.length && a.context.find("button").text("Upload").prop("disabled", !! a.files.error)
	}).on("fileuploadprogressall", function(e, a) {
		var t = parseInt(a.loaded / a.total * 100, 10);
		$("#progress .progress-bar").css("width", t + "%")
	}).on("fileuploaddone", function(e, a) {
		$.each(a.result.files, function(e, t) {
			if (t.url) {
				var n = $("<a>").attr("target", "_blank").prop("href", t.url);
				$(a.context.children()[e]).wrap(n)
			} else if (t.error) {
				var r = $('<span class="text-danger"/>').text(t.error);
				$(a.context.children()[e]).append("<br>").append(r)
			}
		})
	}).on("fileuploadfail", function(e, a) {
		$.each(a.files, function(e) {
			var t = $('<span class="text-danger"/>').text("File upload failed.");
			$(a.context.children()[e]).append("<br>").append(t)
		})
	}).prop("disabled", !$.support.fileInput).parent().addClass($.support.fileInput ? void 0 : "disabled")
});
</script>
</body>
</html>